<template>
	<el-row class="row-option">
		<div class="button-lists float-left">
			<el-button type="primary" plain>导入用户数据</el-button>
			<el-button type="primary" plain>AI策略筛选</el-button>
			<el-button type="primary" @click="openSearchModal">人工策略筛选</el-button>
			<el-button class="clear-margin-left" type="primary" plain :icon="Plus"></el-button>
			<el-button type="primary" plain>线索委派</el-button>
		</div>
	</el-row>
	<el-table class="table-lists" height="calc(100% - 205px)" :header-cell-style="{ color: '#333' }" ref="multipleTable" :data="tableData"
		tooltip-effect="dark" @selection-change="handleSelectionChange">
		<el-table-column type="expand">
			<template #default="{row}">
				<div class="el-big-title el-title">更多信息</div>
				<el-row :gutter="20" class="cell-group big-group">
					<el-col :span="6" class="cell-group-border-left">
						<div class="el-title">标签</div>
						<el-row :gutter="10" class="cell-group small-group">
							<el-col :span="12">
								<ai-cell2 title="人群:" :value="career_status(row.careerStatus)"></ai-cell2>
								<ai-cell2 title="浏览:" :value="row.keyLikes"></ai-cell2>
								<ai-cell2 title="评论:" :value="row.keyComments"></ai-cell2>
							</el-col>
							<el-col :span="12">
								<ai-cell2 title="发文:" :value="row.keyPosts"></ai-cell2>
								<ai-cell2 title="关注对象:" :value="row.followedBrands"></ai-cell2>
								<ai-cell2 title="行为:" :value="row.keyFavorites"></ai-cell2>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="12" class="cell-group-border-left">
						<div class="el-title">网络信息</div>
						<el-row :gutter="10" class="cell-group small-group">
							<el-col :span="6">
								<ai-cell2 title="设备:" :value="row.customer?.device"></ai-cell2>
								<ai-cell2 title="爱好:" :value="row.customer?.hobbies"></ai-cell2>
								<ai-cell2 title="职业:" :value="row.customer?.occupation"></ai-cell2>
							</el-col>
							<el-col :span="3">
								<ai-cell2 title="学校:" :value="row.customer?.school"></ai-cell2>
								<ai-cell2 title="文章数量:" :value="row.customer?.articleCount"></ai-cell2>
								<ai-cell2 title="关注数量:" :value="row.customer?.followingCount"></ai-cell2>
							</el-col>
							<el-col :span="5">
								<ai-cell2 title="关注kol:" :value="row.customer?.followedKolList"></ai-cell2>
								<ai-cell2 title="活跃时间段:" :value="row.activePeriods"></ai-cell2>
								<ai-cell2 title="点赞数量:" :value="row.likeCount"></ai-cell2>
							</el-col>
							<el-col :span="3">
								<ai-cell2 title="转发量:" :value="row.shareCount"></ai-cell2>
								<ai-cell2 title="收藏量:" :value="row.customer?.collectionCount"></ai-cell2>
								<ai-cell2 title="被赞数量:" :value="row.likedCount"></ai-cell2>
							</el-col>
							<el-col :span="7">
								<ai-cell2 class="vertical-cell" title="个人介绍:" :value="row.notes"></ai-cell2>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="6" class="cell-group-border-left">
						<div class="el-title">捕获线索</div>
						<el-row :gutter="10" class="cell-group small-group">
							<el-col :span="24">
								<ai-cell2 title="关键发文:" :value="row.keyPosts"></ai-cell2>
								<ai-cell2 title="关键评论:" :value="row.keyComments"></ai-cell2>
								<ai-cell2 title="关键收藏:" :value="row.keyFavorites"></ai-cell2>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</template>
		</el-table-column>
		<el-table-column type="selection" width="55"></el-table-column>
		<el-table-column prop="channel" label="渠道" show-overflow-tooltip>
			<template #default="scope">
				<el-space>{{ scope.row.customer?.channel }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="customerId" label="用户ID">
			<template #default="scope">
				<el-space>{{ scope.row.customer?.username }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="platformId" label="平台ID号" show-overflow-tooltip width="120">
			<template #default="scope">
				<el-space>{{ scope.row.customer?.platformId }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="lifecycleStage" label="潜客" show-overflow-tooltip>
			<template #default="scope">
				<el-space>{{ changeText(0, scope.row.lifecycleStage) }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="strategyCompliance" label="符合策略" show-overflow-tooltip>
			<template #default="scope">
				<el-space>{{ changeText(1, scope.row.strategyCompliance) }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="leadLevel" label="潜客等级" show-overflow-tooltip>
			<template #default="scope">
				<el-space>{{ changeText(2, scope.row.leadLevel) }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="followerCount" label="引流数据" show-overflow-tooltip>
			<template #default="scope">
				<el-space>{{ scope.row.customer?.followerCount }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="gender" label="性别" show-overflow-tooltip>
			<template #default="scope">
				<el-space>{{ scope.row.gender == 1 ? '男' : '女' }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="birthday" label="年龄" show-overflow-tooltip>
			<template #default="scope">
				<el-space>{{ myAge(scope.row.customer?.birthday) }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="province" label="中国区域" show-overflow-tooltip>
			<template #default="scope">
				<el-space>{{ scope.row.customer?.province }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="city" label="城市" show-overflow-tooltip>
			<template #default="scope">
				<el-space>{{ scope.row.customer?.city }}</el-space>
			</template>
		</el-table-column>
		<el-table-column prop="followedBrands" label="关注品牌" show-overflow-tooltip></el-table-column>
		<el-table-column fixed="right" prop="consumptionAbility" label="消费能力" show-overflow-tooltip></el-table-column>
		<el-table-column fixed="right" prop="engagementRate" label="受影响概率" show-overflow-tooltip
			width="120"></el-table-column>
		<el-table-column fixed="right" prop="id" label="操作" width="200">
			<template #default="scope">
				<!-- <el-row v-if="scope.row.checkQK">
					<el-button type="primary" size="small" plain>确认潜客</el-button>
				</el-row>
				<el-row v-else> -->
				<el-button type="primary" size="small" plain
					@click="openRemarkModal(scope.row.notes, scope.row.id)">备注</el-button>
				<el-button type="primary" size="small" plain @click="onDeleLeadInfo([scope.row.id])">撤销潜客</el-button>
				<!-- </el-row> -->
			</template>
		</el-table-column>
	</el-table>
	<el-row class="row-option" style="margin-top:10px;">
		<div class="button-lists float-left"></div>
		<div class="float-right">
			<el-pagination background layout="prev, pager, next, sizes" :page-size="size" :page-sizes="[10, 25, 30, 50]" :total="total" @current-change="handlerPageSeleChange" @size-change="handlerSizeSeleChange" />
		</div>
	</el-row>
	<el-dialog title="修改" v-model="visible" @close="closeRemarkModal" width="600">
		<el-form>
			<el-form-item label="备注" class="vertical-cell">
				<el-input v-model="notes" type="textarea" :rows="5" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="closeRemarkModal">取消</el-button>
				<el-button type="primary" @click="comfirmRemark">确认</el-button>
			</div>
		</template>
	</el-dialog>
	<el-dialog title="人工策略筛选" v-model="searchModal.visible" @close="closeSearchModal" width="600">
		<el-form :model="searchForm" class="search-form">
			<el-form-item label="关注品牌" prop="keyWord">
				<el-input v-model="searchForm.keyWord" placeholder="请输入关注品牌" clearable />
			</el-form-item>
			<el-form-item label="符合策略" prop="strategyCompliance">
				<el-select
					v-model="searchForm.strategyCompliance"
					placeholder="请选择符合策略"
					clearable
				>
					<el-option v-for="item in get_strategy_compliance()" :label="item.value" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="潜客等级" prop="leadLevel">
				<el-select
					v-model="searchForm.leadLevel"
					placeholder="请选择潜客等级"
					clearable
				>
					<el-option v-for="item in get_lead_level()" :label="item.value" :value="item.id" />
				</el-select>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" plain @click="closeSearchModal">取消</el-button>
			<el-button type="primary" @click="searchChange">确认</el-button>
		</div>
	</el-dialog>
</template>
<script setup lang="ts" name="ai-table">
import { Plus } from "@element-plus/icons-vue";
import { ElMessage,ElMessageBox } from 'element-plus'
import { ref, toRefs, reactive } from "vue";
import { service } from '/@/cool';
import { ElDialog } from "element-plus";
import AiCell2 from "/@/components/aiCell2.vue";
import {
	career_status, get_lead_level,
	get_strategy_compliance,
	lead_level,
	lifecycle_tage,
	strategy_compliance
} from "/@/utils/dictionary";
let props = defineProps({
	tableData: {
		type: Array,
		default: null,
	},
	total:{
		type:Number
	},
	size:{
		type:Number
	}
})
let notes = ref(null);
let id = ref(0);
let { tableData,size,total } = toRefs(props)
let emits = defineEmits(['remarkComfirm', 'selectionChange', 'reloadList','handlerPageSeleChange','handlerSizeChange','manualStrategySearchChange'])
function myAge(birthday:any) {
	if (birthday) {
		birthday = birthday.split('-');
		// 新建日期对象
		let date = new Date()
		// 今天日期，数组，同 birthday
		let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
		// 分别计算年月日差值
		let age = today.map((val, index) => {
			return val - birthday[index]
		})
		// 当天数为负数时，月减 1，天数加本月总天数
		if (age[2] < 0) {
			// 获取当月总天数的方法
			let curMonth = new Date(today[0], today[1], 0)
			age[1]--
			age[2] += curMonth.getDate()
		}
		// 当月数为负数时，年减 1，月数加上 12
		if (age[1] < 0) {
			age[0]--
			age[1] += 12
		}
		return age[0]
	}
}
function onDeleLeadInfo(ids:any) {
	ElMessageBox.confirm('你真的确定要撤销该潜客吗?')
    .then(() => {
		service.lead.info.delete({ ids: ids }).then(() => {
		emits("reloadList")
		setTimeout(() => {
			ElMessage({
				showClose: true,
				message: '撤销成功',
			})
		}, 1000)
	})
    })
    .catch(() => {
      // catch error
    })

}
function changeText(type:number, number:number) {
	let str = ''
	if (type == 0) {
		str = lifecycle_tage(number);
	}
	else if (type == 1) {
		str = strategy_compliance(number);
	}
	else if (type == 2) {
		str = lead_level(number)
	}
	return str;
}
const handleSelectionChange = (val: any) => {
	emits("selectionChange", val);
}
const handlerPageSeleChange = (val:any)=>{
	emits("handlerPageSeleChange", val);
}
const handlerSizeSeleChange=(val:any)=>{
	emits("handlerSizeChange", val);
}
let visible = ref(false)
const openRemarkModal = (_notes:any, _id:any) => {
	notes.value = _notes;
	id.value = _id;
	visible.value = true;
}
const closeRemarkModal = () => {
	visible.value = false;
}
const comfirmRemark = () => {
	service.lead.info.update({
		id: id.value,
		notes: notes.value
	}).then(() => {
		emits("reloadList");
		setTimeout(() => {
			ElMessage({
				showClose: true,
				message: '备注成功',
			})
		}, 1000)
	})
	closeRemarkModal();
}
//人工策略筛选
const searchForm=reactive({
	keyWord:"",//关注品牌
	strategyCompliance:"",//符合策略
	leadLevel:"",//潜客等级
})
const searchModal = reactive({
	visible: false,
})
const openSearchModal = () => {
	searchModal.visible = true;
}
const closeSearchModal = () => {
	searchModal.visible = false;
}
const searchChange = () => {
	closeSearchModal();
	emits("manualStrategySearchChange",searchForm)
}
</script>
<style scoped lang="scss">
.table-lists{
	:deep(.el-table__inner-wrapper){
		height: 100% !important;
	}
}
.button-lists {
	margin: 20px 0;
}
.vertical-cell{
	display: block;
}
.cell-group-border-left + .cell-group-border-left{
	border-left: 1px solid #dedede;
}
.el-title{
	font-size: 16px;
	color: #000;
	font-weight: 600;
	&.el-big-title{
		font-size: 20px;
	}
}
.big-group{
	padding: 20px 0;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
}
.small-group{
	padding: 10px 0;
}
.clear-margin-left {
	margin-left: 0;
}
.search-form{
	padding: 10px;
	box-sizing: border-box;
}
.dialog-footer{
	text-align: right;
}
</style>
